<template>
  <p>App</p>
  <p>{{ count }}</p>
  <button @click="setCount">+</button>
  <p>{{ person.name }}</p>
  <p>{{ oddOrEven }}</p>
  <Child :count="count" @setCount="setCount" :age="18" />
</template>

<script setup lang="ts">
import { ref, reactive, watch, computed, onMounted } from "vue";
/*
  <script lang="ts" setup> 开启setup语法糖
    1. 整个script内部的代码，相当于在setup函数中
    2. 定义数据会自动暴露，引入组件会自动注册
*/
import Child from "./Child.vue";

const count = ref(0);

const person = reactive({ name: "jack" });

const setCount = () => {
  count.value++;
};

watch(count, () => {
  console.log("watch触发了");
});

const oddOrEven = computed(() => ((count.value & 1) === 1 ? "奇数" : "偶数"));

onMounted(() => {
  console.log("onMounted");
});
</script>
